<script setup>
import {
  computed,
  inject,
  onBeforeMount,
  onBeforeUnmount,
  onMounted,
  reactive,
  ref,
  watch,
  watchEffect,
} from 'vue'
import { Message as ElMessage } from 'element-ui'
import { cloneDeep } from 'lodash'
import { deleteIndexEvaluate } from '@api/city-index'

const {
  changeIndexInfo,
  addIndexEvaluate,
  changeIndexEvaluate,
  deleteEvaluateIndex,
} = inject('link')

const props = defineProps({
  indexInfo: {
    type: Object,
    default: () => {},
  },
  show: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})

const infoForm = reactive({
  indexParaphrase: '',
  indexUnit: '',
  indexType: '',
})

const typeOptions = [
  {
    label: '区间型',
    value: '区间型',
  },
  {
    label: '底线型',
    value: '底线型',
  },
  {
    label: '目标型',
    value: '目标型',
  },
  {
    label: '普查型',
    value: '普查型',
  },
]

const normData = ref([])

watchEffect(() => {
  let id
  if (Object.prototype.hasOwnProperty.call(props.indexInfo, 'pkid')) {
    id = props.indexInfo.pkid
  } else {
    id = props.indexInfo.tempId
  }
  if (!id) {
    const obj = {
      indexParaphrase: '',
      indexUnit: '',
      indexType: '',
    }
    Object.assign(infoForm, obj)
    normData.value = []
  } else {
    Object.assign(infoForm, props.indexInfo.indexInformationRel)
    normData.value = cloneDeep(props.indexInfo.indexEvaluateRels)
  }
})

const handleChangeInfo = (key) => {
  changeIndexInfo(key, infoForm[key])
}

const handleChangeTable = (index, key, value) => {
  changeIndexEvaluate(index, key, value)
}

const handleAddNormal = () => {
  if (!infoForm.indexType) {
    ElMessage.warning('请选择指标类型后重试！')
    return
  }
  normData.value.push({
    evaluateResult: '',
    moreThan: null,
    lessThan: null,
  })
  addIndexEvaluate({
    evaluateResult: '',
    moreThan: null,
    lessThan: null,
  })
}

const deleteTableItem = (data, index) => {
  if (data.pkid) {
    deleteIndexEvaluate(data.pkid).then((res) => {
      if (res.success) {
        ElMessage.success('删除评价标准成功！')
        normData.value.splice(index, 1)
        deleteEvaluateIndex(index)
      } else {
        ElMessage.error(res.message)
      }
    })
  } else {
    normData.value.splice(index, 1)
    deleteEvaluateIndex(index)
  }
}
</script>

<template>
  <div class="index-detail">
    <div class="title">指标信息</div>
    <el-form :model="infoForm" label-position="top" class="index-form">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="指标释义" prop="indexParaphrase">
            <el-input
              v-model="infoForm.indexParaphrase"
              placeholder="请输入指标释义"
              @input="handleChangeInfo('indexParaphrase')"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="指标单位" prop="indexUnit">
            <el-input
              v-model="infoForm.indexUnit"
              placeholder="请输入指标单位"
              @input="handleChangeInfo('indexUnit')"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="指标类型" prop="indexType">
            <el-select
              v-model="infoForm.indexType"
              placeholder="请选择指标类型"
              @input="handleChangeInfo('indexType')"
              :disabled="disabled"
            >
              <el-option
                v-for="(item, index) in typeOptions"
                :label="item.label"
                :value="item.value"
                :key="index"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="title-content" v-show="infoForm.indexType !== '普查型'">
      <div class="title">评价标准</div>
      <div class="add-index" @click="handleAddNormal" v-show="!disabled">
        <svg-icon icon-class="addIndex" />
        <p>新增评价标准</p>
      </div>
    </div>
    <el-table
      class="norm-table"
      :data="normData"
      v-show="infoForm.indexType !== '普查型'"
    >
      <el-table-column prop="evaluateResult" label="评价结论">
        <template #default="scope">
          <el-input
            v-model="scope.row.evaluateResult"
            placeholder="请输入"
            @input="
              handleChangeTable(
                scope.$index,
                'evaluateResult',
                scope.row.evaluateResult
              )
            "
            :disabled="disabled"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="moreThan"
        label="数值高于（包含）"
        v-if="infoForm.indexType !== '底线型'"
      >
        <template #default="scope">
          <el-input
            type="number"
            v-model="scope.row.moreThan"
            placeholder="请输入"
            @input="
              handleChangeTable(scope.$index, 'moreThan', scope.row.moreThan)
            "
            :disabled="disabled"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="lessThan"
        label="数值低于（不包含）"
        v-if="infoForm.indexType !== '目标型'"
      >
        <template #default="scope">
          <el-input
            type="number"
            v-model="scope.row.lessThan"
            placeholder="请输入"
            @input="
              handleChangeTable(scope.$index, 'lessThan', scope.row.lessThan)
            "
            :disabled="disabled"
          />
        </template>
      </el-table-column>
      <el-table-column width="60px">
        <template #default="scope">
          <!--          <el-button :disabled="disabled" type="text" size="mini"-->
          <!--            >删除</el-button-->
          <!--          >-->
          <el-popconfirm
            style="margin-left: 10px"
            title="确定删除该指标体系吗？"
            @confirm="deleteTableItem(scope.row, scope.$index)"
          >
            <el-button
              :disabled="disabled"
              slot="reference"
              type="text"
              style="color: #ff125b"
            >
              删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang="scss">
.index-detail {
  padding-left: 20px;
  height: 100%;
  overflow-y: auto;

  .title-content {
    width: calc(100% - 40px);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title {
    margin-top: 16px;
    font-weight: bold;
    font-size: 14px;
    color: #4e525f;
    display: flex;
    align-items: center;

    &::before {
      content: '';
      width: 4px;
      height: 12px;
      background: #10a6dd;
      margin-right: 4px;
    }
  }

  .add-index {
    cursor: pointer;
    margin-left: 20px;
    margin-top: 10px;
    height: 12px;
    font-weight: 400;
    font-size: 14px;
    color: #10a6dd;
    display: flex;
    align-items: center;
    p {
      margin-left: 2px;
    }
  }

  :deep(.el-form.index-form) {
    width: calc(100% - 20px);
    .el-input__inner {
      background: #f9fbff;
      border-radius: 4px;
      border: 1px solid #e1ecf5;
      width: 290px;
    }

    .el-textarea__inner {
      background: #f9fbff;
      border-radius: 4px;
      border: 1px solid #e1ecf5;
    }

    .el-form-item {
      margin-bottom: 0;
    }

    .el-form-item__label {
      padding-bottom: 0;
    }
  }

  .calc-content {
    margin-top: 13px;
    width: calc(100% - 40px);
    height: 200px;
    display: flex;

    .left {
      height: 100%;
      width: 290px;
      background: #f5f8fe;
      border: 1px solid #f3f3f9;

      .top-title {
        height: 34px;
        background: #f3f3f9;
        border: 1px solid #f3f3f9;
      }

      .data-list {
        height: calc(100% - 56px);
        overflow-y: auto;
        padding: 10px;

        .list-item {
          user-select: none;
          cursor: pointer;
          display: flex;
          height: 34px;
          align-items: center;
          justify-content: space-between;
          font-weight: 400;
          font-size: 14px;
          color: #717689;
          padding: 0 9px;

          .svg-icon {
            margin-right: 6px;
          }

          &.active {
            background: #ffffff;
            box-shadow: 0px 0px 4px 0px rgba(225, 225, 225, 0.74);
          }

          .item-left {
            display: flex;
            align-items: center;
          }

          .item-right {
            display: flex;
            align-items: center;
          }
        }
      }
    }

    .right {
      flex: 1;
      border: 1px solid #f3f3f9;

      .top-symbol {
        user-select: none;
        height: 34px;
        background: #f9fbff;
        border: 1px solid #f3f3f9;
        line-height: 34px;
        .operate {
          margin-left: 26px;
          cursor: pointer;

          &:hover {
            color: #00c3ff;
          }
        }
      }

      .bottom-formula {
        padding: 12px 18px;
        display: flex;
        align-items: center;

        .cursor {
          min-width: 5px;
          height: 16px;
          display: inline-block;
          cursor: pointer;
          text-align: center;
        }

        .cursor:hover {
          background: #10a6dd;
        }

        .cursor.active {
          animation: cursorActive 1s infinite alternate;
        }
        @keyframes cursorActive {
          0% {
            opacity: 1;
            background: #10a6dd;
          }
          100% {
            opacity: 0;
            background: #a5dff6;
          }
        }
      }
    }
  }

  .norm-table {
    margin-top: 13px;
    margin-bottom: 20px;
    width: calc(100% - 40px);
    border-left: 1px solid #f3f3f9;
    border-right: 1px solid #f3f3f9;
  }
}
</style>
